
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
			body{
				background-color: pink;
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			.left{
				float: left;
				text-align: center;
				min-width: 100px;
				min-height: 900px;
			}
			.center{
				text-align: center;
				position: absolute;
				left: 50%;
				margin-left: -512px;
				width: 1024px;
				height: 614px;
				
			}
			.right{
				float: right;
				min-width: 100px;
				min-height: 900px;
			}
			ol{
				font-size: 1.2em;
				line-height: 50px;
			}
			li{
				line-height: 40px;
			}
			.footer{
				clear:both;
				position: relative;
				width: 100%;
				min-width: 1024px;
				height: 40px;
				background-color: rgb(255, 140, 59);
				text-align: center;
			}
			span{
				line-height: 40px;
				letter-spacing: 3px;
			}	
			.title{
				font-size: 1.8em;
				position: relative;
				letter-spacing: 4px;
				top: 12%;
			}
			.name{	
				position: relative;
				top: 40%;
				
			}
			.name span{
				font-size: 2em;
				letter-spacing: 4px;
				padding: 20px 30px;
				width: 200px;
				color: #FFF;
				border: 2px solid skyblue;
				-webkit-user-select: none;		
			}
			.name span:hover{
				cursor: pointer;
			    font-size: 2.4em;
			}
		</style>
	</head>
	<body>
		<div class="left">
			<ol>操作说明
				<li>按enter开始</li>
				<li>再按一次选出3名中奖者</li>
				<li>按esc重置</li>
				
			</ol>
		</div>
		<div class="center">
			<div class="title">
				<span>抽奖</span>
			</div>
			<div class="name">
				<span id="show-box">
					ENTER键开始
				</span>
			</div>
		</div>
		<div class="right">
			<ol id="list">中奖名单
			</ol>
		</div>
		<div class="footer">
			<span>rhs</span>
		</div>
	</body>
	<script>
	
		var names = ['曹操',
			'赵云',
			'关羽',
			'刘备',
			'张飞',
			'诸葛亮',
			'王八',
			'三八',
		];
		var intavlflag; 
		var isBegin = false;
		var lucker;
		var luckers = []; 
		
		document.onkeydown = function(e) {
			switch(e.keyCode) {
				case 13:				
					extract();
					break;
				case 27:
					names = names.concat(luckers);
					console.info('还原数组:' + names);
					luckers = []; 
					$('list').innerHTML = '';
					break;
			}
		}
 
		function extract() {
			if(isBegin) {
				clearInterval(intavlflag);
				luckers.push(lucker);
				var li = document.createElement('li');
				li.innerHTML = lucker;
				$('list').appendChild(li);
				removeName(names, lucker);
				$('show-box').className='tip';
				isBegin = false;
			} else {
				
				if(luckers.length < 3) {					
					intavlflag = setInterval(begin, 50);					
					$('show-box').className='';					
					isBegin = true;
				} else {
					alert('人数已满!');
				}
			}
		}
 
		function removeName(arr, name) {
			for(var i = 0; i < arr.length; i++) {
				if(arr[i] == name) {
					arr.splice(i, 1);
					console.info('移除：' + name + '--剩余：' + arr);
					break;
				}
			}
		}
 
		function begin() {
			var index = Math.floor(Math.random() * names.length);
			lucker = names[index];
			$('show-box').innerHTML = lucker;
		}
 
		function $(id) {
			return document.getElementById(id);
		}
	</script>
</html>